
import React from 'react';
import * as mobx from 'mobx';
import { Spin } from 'antd';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import Cell from './Cell'; 
import SmartGuessPic from './SmartGuessPic';
import * as FormUtil from "../../util/formUtil";
import { getAntd } from '../../util/convert';
@observer
export default class Container extends React.Component {

  render() {
    const { smartGuessStore, commonParam } = this.props;
    const { smartGuessStatus, allMapshow, clickedMap, forecastUrl, iframeHeight, hasResultFlag, needloading} = smartGuessStore;
    const {Spin} = getAntd();
    return (
      <div id="wf-map-container">
        {/* 智能预测图 */}
        {  clickedMap.has('smart-btn-click') && <div id="map-box" className={(smartGuessStatus && !allMapshow) ? 'map-box-show': 'map-box-hidden'}>
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5g9cr6`} spinning={!hasResultFlag || needloading}></Spin>
          <SmartGuessPic ecId={`${this && this.props && this.props.ecId || ''}_SmartGuessPic@6zsr7p`} commonParam={commonParam}/>
        </div>
        }
        {/* 完整流程图 */}
        <div className={!smartGuessStatus ? 'map-box-show': 'map-box-hidden'}>
          <iframe className='req-workflow-map' src='' style={{ border: 0, width: '100%' }}></iframe>
        </div>
        {/* 预测流经流程图 */}
         {clickedMap.has('all-btn-click') && <div className={(smartGuessStatus&&allMapshow)  ? 'map-box-show': 'map-box-hidden'}>
            <iframe className='forecast-map' src={forecastUrl} style={{ border: 0, width: '100%', height: iframeHeight  }}></iframe>
          </div>
          }
      </div>
    )
  }
}